<template>
  <button 
    class="contact-service-btn" 
    :class="customClass"
    open-type="contact" 
    @contact="handleContact"
    :style="customStyle"
  >
    <slot>
      <text class="btn-text">{{ buttonText }}</text>
    </slot>
  </button>
</template>

<script>
export default {
  name: 'ContactService',
  props: {
    buttonText: {
      type: String,
      default: '联系客服'
    },
    customClass: {
      type: String,
      default: ''
    },
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleContact(e) {
      console.log('联系客服', e);
      this.$emit('contact', e);
    }
  }
}
</script>

<style scoped lang="scss">
.contact-service-btn {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: #fff;
  border: none;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
  
  &::after {
    border: none;
  }
}

.btn-text {
  color: #fff;
  font-size: inherit;
}
</style> 